<template>
  <div class="">
    <div id="fenlei">
      <p class="psl" data-v-305c369e>
        <input
          data-v-305c369e=""
          placeholder="回车搜索商品"
          type="text"
          class="inp"
          @keydown.13="addll"
        />
      </p>
      <div data-v-305c369e>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item class="van-swipe-item"
            ><img src="../assets/image/05.png" alt="" class="image"
          /></van-swipe-item>
          <van-swipe-item class="van-swipe-item"
            ><img src="../assets/image/06.png" alt="" class="image"
          /></van-swipe-item>
          <van-swipe-item class="van-swipe-item"
            ><img src="../assets/image/07.png" alt="" class="image"
          /></van-swipe-item>
          <van-swipe-item class="van-swipe-item"
            ><img src="../assets/image/08.png" alt="" class="image"
          /></van-swipe-item>
        </van-swipe>
      </div>

      <div>
        <ol>
          <li
            class="feired"
            v-for="item in list"
            :key="item.id"
            @click="change(item.pid)"
          >
            {{ item.name }}
          </li>
        </ol>
        <ul data-v-305c369e>
          <li v-for="item in result" :key="item.id">
            <img :src="item.icon" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getshoplist } from "@/utils/api/home.js";

export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "所有分类",
          pid: "0",
        },
        {
          id: 2,
          name: "居家",
          pid: "15124",
        },
        {
          id: 3,
          name: "配件装饰",
          pid: "15116",
        },
        {
          id: 4,
          name: "服装",
          pid: "15115",
        },
        {
          id: 5,
          name: "电器",
          pid: "15114",
        },
      ],
      shoplist: [],
      lun: [],
      active: "0",
      result: [],
    };
  },
  mounted() {
    getshoplist().then((res) => {
      console.log(res);
      this.shoplist = res.data;
      this.result = this.shoplist;
    });
  },
  methods: {
    change(id) {
      this.active = id;
      this.result = this.shoplist.filter((item) => {
        return item.pid == this.active;
      });
    },
    addll(e){
      this.result=this.shoplist.filter(item=>{
        return item.name.includes(e.target.value)
      })
    }
  },
};
</script>

<style lang='scss'>
body {
  background: white;
}
.psl{
  position: fixed;
  top: 0;
}
#fenlei > p:nth-of-type(1) {
  width: 100%;
  height: 0.72rem;
  border-bottom: 0.0144rem solid #f3f3f3;
  display: flex;
  align-items: center;
  background: white;
  z-index: 2;
}
#fenlei > p:nth-of-type(1) input {
  width: 4.99rem;
  height: 0.5rem;
  background: #f5f5f5;
  border: none;
  border-radius: 0.288rem;
  margin-left: 0.288rem;
  padding-left: 0.288rem;
  font-size: 0.24rem;
  position: fixed;
  top: 7;
}
#fenlei > div:nth-of-type(2) ol {
  width: 1.8288rem;
  border-right: 0.0144rem solid #e9e9e9;
  // height: 100%;
  overflow: auto;
  background: white;
  margin-top: 0.72rem;
  z-index: 1;
  position: fixed;
}
#fenlei > div:nth-of-type(2) ol li {
  width: 1.8288rem;
  height: 0.72rem;
  font-size: 0.288rem;
  // text-align: center;
  line-height: 0.72rem;
  margin-top: 0.144rem;
}
#fenlei > div:nth-of-type(1) {
  width: 5.5rem;
  display: flex;
  justify-content: space-around;
}
#fenlei > div:nth-of-type(2) > ul {
  width: 5.3568rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
  padding: 0 0.144rem;
  box-sizing: border-box;
  float: right;
}
#fenlei > div:nth-of-type(2) > ul li {
  // overflow-x: scroll;
  display: flex;
  justify-content: center;
  //   flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  width: 30%;
  margin-top: 0.144rem;
  font-size: 0.24rem;
}
#fenlei > div:nth-of-type(2) > ul li img {
  width: 1.584rem;
  height: 1.584rem;
  display: block;
}
div[data-v-305c369e] {
  width: 4rem;
  height: 150px;
  float: right;
  margin-right: 5px;
  // margin-top: 0.72rem;
}
.image {
  width: 100%;
  height: 100%;
}
.my-swipe {
  width: 100%;
  height: 100%;
  margin-top: 0.72rem;
}
.van-swipe-item {
  float: left;
}
ul[data-v-305c369e]{
  margin-top: 0.72rem;
}
</style>
